<template>
  <el-card>
    <!-- 添加用户 -->
      <info-header slot="header">
        <template slot="title">添加用户</template>
      </info-header>
      <div class="Containerskc">
        <div class="left_list">
          <div class="labesc">
          <el-tree show-checkbox @check-change="loadNode" :data="datas" :props="defaultProps" accordion node-key="label" @node-click="handleNodeClick">
            <div slot-scope="{node}">
              <i style="margin-right: 5px;" class="el-icon-document"></i>
              <el-tag style="cursor: pointer;">{{ node.label }}</el-tag>
            </div>
          </el-tree>
          </div>
        </div>
        <div class="fromtabel">
            <el-form ref="ruleForm" :label-position="labelPosition" :rules="rules" label-width="50%" :model="formLabelAlign">
            <el-form-item label="姓名：" prop="name">
                <el-input v-model="formLabelAlign.name" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="账户名称：" prop="account">
                <el-input v-model="formLabelAlign.account" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="密码：" prop="password">
                <el-input type="password" v-model="formLabelAlign.password" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">提交</el-button>
                <el-button @click="$router.go('-1')">取消</el-button>
            </el-form-item>
            </el-form>
        </div>
      </div>
  </el-card>
</template>

<script>
import { getRoleCity, addManagerUser } from '@/api'
export default {
  data () {
    return {
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      labelPosition: 'right',
      datas: [],
      cityList: [],
      rules: {
        name: [{ required: true, message: '该字段为必填字段', trigger: 'change' }],
        account: [{ required: true, message: '该字段为必填字段', trigger: 'change' }],
        password: [{ required: true, message: '该字段为必填字段', trigger: 'change' }]
      },
      formLabelAlign: {
        name: '',
        account: '',
        password: ''
      }
    }
  },
  created () {
    this.getRoleCity()
  },
  methods: {
    // 获取节点
    loadNode (data) {
      console.log(data)
      this.cityList.push(data.id)
    },
    // 获取城市列表
    async getRoleCity () {
      const ser = await getRoleCity()
      console.log(JSON.stringify(ser.data))
      if (ser?.code === 200) {
        this.datas = ser.data.data
        for (let i = 0; i < this.datas.length; i++) {
          this.datas[i].disabled = true
        }
      }
    },
    submitForm () {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          const data = {
            cityList: this.cityList,
            ...this.formLabelAlign
          }
          const ser = await addManagerUser(data)
          if (ser?.code === 200) {
            this.$message.success(ser.msg)
          }
          setTimeout(() => {
            this.$router.go('-1')
          }, 800)
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.Containerskc {
  display: flex;
}
    .left_list {
      width: 220px;
      height: calc(100vh - 64px);
      border-right: 1px solid #f0f0f0;
      display: flex;
      box-sizing: border-box;
      flex-direction: column;
      padding: 0 24px 24px;
      overflow-x: hidden;

      .labesc {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        /deep/.el-tree {
          .el-tree-node {
            padding: 8px 0;
          }
        }
      }

    }
    .fromtabel {
      width: 100%;
        height: 100vh - 25;
        padding-right: 40%;
    }

</style>
